﻿@model ProductModel.RelatedProductModel

@{
    var parentModel = ViewData["Parent"] as ProductModel;
}

<datagrid id="crosssellproducts-grid"
          allow-resize="true"
          allow-row-selection="true"
          allow-edit="false"
          max-height="500px">
    <datasource read="@Url.Action("CrossSellProductList", new { productId = parentModel.Id })"
                delete="@Url.Action("CrossSellProductDelete")" />
    <paging position="Bottom" page-index="1" show-size-chooser="false" />
    <toolbar>
        <toolbar-group>
            <button id="pick-crosssell-products" type="button" class="btn btn-primary btn-flat no-anims">
                <i class="fa fa-plus"></i>
                <span>@T("Common.AddNew")</span>
            </button>
            <button type="button"
                    id="btnCreateMutuallyCrossSellProducts"
                    data-url="@Url.Action("CreateAllMutuallyCrossSellProducts", new { productId = parentModel.Id })"
                    data-ask="@T("Admin.Common.AskCreateMutuallyAssociations")"
                    class="btn btn-light btn-flat">
                <i class="fa fa-random"></i>
                <span>@T("Admin.Common.CreateMutuallyAssociations")</span>
            </button>
        </toolbar-group>
        <zone name="datagrid_toolbar_alpha"></zone>
        <toolbar-group class="omega"></toolbar-group>
        <zone name="datagrid_toolbar_omega"></zone>
        <toolbar-group>
            <button datagrid-action="DataGridToolAction.DeleteSelectedRows" type="button" class="btn btn-danger no-anims btn-flat">
                <i class="far fa-trash-alt"></i>
                <span>@T("Admin.Common.Delete.Selected")</span>
            </button>
        </toolbar-group>
    </toolbar>
    <columns>
        <column for="Product2Name" hideable="false" width="4fr" readonly>
            <display-template>
                @Html.LabeledProductName()
            </display-template>
        </column>
        <column for="Product2Sku" width="2fr" readonly />
        <column for="Product2Published" halign="center" readonly />
    </columns>
    <row-commands>
        <a datarow-action="DataRowAction.Delete">@T("Common.Delete")</a>
    </row-commands>
</datagrid>

<entity-picker icon-css-class="fa fa-plus"
               caption='@T("Admin.Common.Search")'
               dialog-title='@T("Admin.Catalog.Products.CrossSells.AddNew")'
               onselectioncompleted="PickCrossSellProducts_Completed"
               class="crosssell-product-picker"
               style="display:none" />

<script>
    $(function () {
        // Call hidden entity picker.
        $(document).on("click", "#pick-crosssell-products", function (e) {
            $(".crosssell-product-picker").trigger("click");
            return false;
        });

        // Mutually create related products.
        $(document).on("click", "#btnCreateMutuallyCrossSellProducts", function () {
            $(this).ajax({
                success: function (resp) {
                    alert(resp.Message);
                }
            });
        });
    });

    function PickCrossSellProducts_Completed(ids) {
        $({}).ajax({
            url: '@Url.Action("CrossSellProductAdd")',
            data: {
                "productId": @parentModel.Id,
                "selectedProductIds": ids
            },
            success: function () {
                window["crosssellproducts-grid"].$children[0].read();
            }
        });
        return true;
    };
</script>